<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>省份列表</title>
</head>
<body>
<div id="app">

    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <span> {{ message }} </span>
                <table class="table table-striped table-hover">
                    <tr>
                        <th>ID</th>
                        <th>省份</th>
                        <th>标签</th>
                        <th>景点个数</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                        <tr v-for="province in provinces" :key="province.id">
                            <td> {{ province.id }} </td>
                            <td> {{ province.name }} </td>
                            <td> {{ province.tags }} </td>
                            <td> {{ province.placecounts }} </td>
                            <td>
                                <button class="btn btn-danger" @click="deleteById(province.id)">删除省份</button>
                                <button class="btn btn-success" @click="toPlace(province.id)">景点列表</button>
                                <button class="btn btn-info" @click="updateById(province.id)">修改省份</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <a @click.prevent="findAll(page-1)">&lt;上一页</a>
                &nbsp;<a v-for="pageNum in totalsPage" @click.prevent="findAll(pageNum)"> {{ pageNum }} </a>&nbsp;
                <a @click.prevent="findAll(page+1)">下一页&gt;</a>
                <button type="button" class="btn btn-info" @click="toAdd">添加省份</button>
            </div>
        </div>

    </div>

</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            provinces:[],
            page:1,
            rows:4,
            totalsPage:1,
            totals:0,
            message:"",
        },
        methods:{
            findAll(page1){
                let _this = this;
                if (page1>_this.totalsPage){
                    return;
                }
                if (page1<1){
                    return;
                }
                axios.get("http://localhost:9999/province/findByPage?page="+page1+"&rows="+_this.rows).then(function (response) {
                    _this.provinces = response.data.provinces;
                    _this.page = response.data.page;
                    _this.totalsPage = response.data.totalsPage;
                    _this.totals = response.data.totals;
                });
            },
            toAdd(){
                location.href="addProvince.html";
            },
            deleteById(id){
                let _this = this;
                axios.get("http://localhost:9999/province/delete?id="+id).then(function (response) {
                    if (response.data.flag){
                        location.href="provinceList.html";
                    }else {
                        _this.message = response.data.message;
                    }
                })
            },
            updateById(id){
                location.href="updateProvince.html?id="+id;
            },
            toPlace(id){
                location.href="placeList.html?id="+id;
            }

        },
        created(){
            this.findAll(this.page);
        }
    });
</script>